<template>
  <div class="mapConter">
    <drag
      @handleChecked="handleChecked"
      @setKM="setKM"
      @handleSearchData="handleSearchData"
      :checked="isChecked"
    />
    <baidu-map
      id="baidumap"
      :center="{ lng: 113.65, lat: 34.76 }"
      :zoom="10"
      style="height: 830px; width: 100%"
      :scroll-wheel-zoom="true"
      @ready="handler"
    >
    </baidu-map>

    <div class="rightMove" @click="handleRightMove"><rightMove /></div>
    <el-drawer
      v-drawerDrag
      class="drawers"
      :modal="false"
      :visible.sync="$store.state.map.drawer"
      :direction="direction"
      :with-header="false"
      :size="drawerWidth"
    >
      <div class="tabsPadding">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :label="labelQY" name="first">
            <el-button type="text">暂未开放</el-button>
            <!-- <currentTitle :address="searchData" :distance="getKM" />
            <rowSearch @handleChildSearchs='handleChildSearchs'/>
            <tableComponents :total="total" :enterpriselist="enterpriselist" @setPageNum="setPageNum"/> -->
          </el-tab-pane>
          <el-tab-pane :label="labelLY" name="second">
            <currentTitle :address="searchData" :distance="getKM" />
            <tableComponentsLy :loadingLY="loadingLY" :total="total" :enterpriselist="enterpriselist" @setPageNum="setPageNum"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import rowSearch from "@/components/Map/rowSearch.vue";
import drag from "@/components/Map/dragButton.vue";
import rightMove from "@/components/Map/svg/rightMove.vue";
import currentTitle from "@/components/Map/currentTitle.vue";
import currentTitleYuLou from "@/components/Map/currentTitleYuLou.vue";
import tableComponents from "@/components/Map/tableComponents.vue";
import tableComponentsLy from "@/components/Map/tableComponentsLy.vue";
import { mapActions } from "vuex";
	import { ly_shp_geo_polygon_company_list,company_base_listTab } from "@/api/map/index";

// https://blog.csdn.net/szzlh123456789/article/details/134242500
export default {
  components: {
    drag,
    rightMove,
    currentTitle,
    currentTitleYuLou,
    tableComponents,
    tableComponentsLy,
    rowSearch
  },
  data() {
    return {
      pageNumber:1,//当前页 
      total:0,//企业总数
      enterpriselist:[],//企业列表 
      ChildSearchsV:{},//企业的所有参数
      labelQY: "企业",
      labelLY: "片区",


      loadingLY:false,//楼宇loading
      drawer: false,
      direction: "rtl",
      activeName: "first",
      drawerWidth: "860px",
      address: "广东省广州市黄埔区",
      addressSearch: "成都市财富国际",
      distance: 0,
      getKM: 1000,
      map: null,
      mPoint: null,
      isChecked: false, //是否选中的状态
      searchData: "", //搜索的数据
      point: {
        lat: 39.910925,
        lng: 116.413384,
      },
    };
  },
  mounted() {
    let _this = this;
    setTimeout(() => {
      _this.getLogLat(_this.addressSearch);
    }, 500);
  },
  methods: {
    ...mapActions("map", ["handledrawer"]),
    createMap(point) {
      let _this = this;
      // 百度地图API功能
      _this.map = new BMap.Map("baidumap");
      _this.mPoint = new BMap.Point(point.lng, point.lat);
        
        



      _this.map.enableScrollWheelZoom();
      _this.map.centerAndZoom(_this.mPoint, 15);

      var local = new BMap.LocalSearch(this.map, {
        renderOptions: { map: _this.map, autoViewport: false },
        onSearchComplete: function(results){
    if (local.getStatus() == BMAP_STATUS_SUCCESS){
      _this.mPoint2 = results.getPoi(0).point; // 获取第一个搜索结果的经纬度
      // var circle = new BMap.Circle(point, 500, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5});
      // _this.map.addOverlay(circle);
      // _this.map.centerAndZoom(point, 15);
    }
  }
      });
      local.searchNearby(_this.searchData, _this.mPoint, _this.getKM);
      if (_this.isChecked === true) {
        _this.handleChecked(_this.isChecked);
      }
    },
    handleRightMove() {
      this.$store.dispatch("map/handledrawer");
    },
   
   handleClick(tab, event) {
        console.log(tab.name);
        if(tab.name==="second"){
         this.handlely_shp_geo_polygon_company_list()
        }
      },
    handler() {},
    // 设置是否有圈
    handleChecked(v) {
      let _this = this;
      _this.isChecked = v;
      console.log("=====vvvv0=================", v);
      console.log("=====vvvv1=================", _this.mPoint);
      console.log("=====vvvv2=================", _this.getKM);
      if (v == true) {
        var circle = new BMap.Circle(_this.mPoint2, _this.getKM, {
          fillColor: "#6197FF",
          strokeWeight: 1,
          fillOpacity: 0.12,
          strokeOpacity: 1,
          strokeColor: "blue", 
        });
 
       _this.map.addOverlay(circle);
        
      } else {
        _this.map.clearOverlays();
        if (_this.searchData) {
          _this.handleSearchData(_this.searchData);
        }
      }
    },
    // 设置距离
    setKM(v) {
      let _this = this;
      _this.map.clearOverlays();
      _this.getKM = v.lable * 1000;
      _this.isChecked = v.Checked;
      if (_this.searchData.trim() !== "") {
        _this.getLogLat(_this.searchData);
      }

      console.log(
        "v.Checked v.Checked v.Checked v.Checked v.Checked ",
        v.Checked
      );
    },
    // 搜索地址
    handleSearchData(v) {
      let _this = this;
      _this.searchData = v;

      if (_this.searchData.trim() === "") {
        _this.map.clearOverlays();
        return;
      } else {
        _this.getLogLat(v);
      }
      console.log("搜索的地址-------", _this.searchData);
    },
    getLogLat(address) {
      let _this = this;
      var myGeo = new BMap.Geocoder();
      myGeo.getPoint(address, function (point) {
        _this.point = point;
        console.log("point", point);
        _this.createMap(point);
      });
    },
    // 获取企业搜索的参数数据
    handleChildSearchs(v){
      this.ChildSearchsV=v
      
      //TODO 把参数获取到后去搜索table列表接口
      let queryParams={
        data :  {
            "formData": {
              "polygon": "POLYGON ((113.26700550984805 23.10182536453337, 113.26669832056774 23.101818878788674, 113.26639230693374 23.101794751914827, 113.26608867722342 23.101753077206045, 113.26578863052953 23.101694016353992, 113.2654933520132 23.101617798866382, 113.26520400820893 23.101524721230287, 113.26492174240074 23.10141514582196, 113.2646476700871 23.10128949956532, 113.26438287455419 23.10114827234298, 113.26412840257451 23.100992015163612, 113.26388526024886 23.100821338091446, 113.26365440900771 23.100636907943734, 113.2634367617895 23.10043944576391, 113.26323317940955 23.100229724078485, 113.26304446713623 23.100008563947245, 113.2628713714865 23.099776831816893, 113.26271457725512 23.09953543618979, 113.26257470478862 23.09928532411968, 113.26245230751549 23.09902747754793, 113.26234786974256 23.09876290949384, 113.26226180472611 23.098492660113973, 113.26219445302587 23.098217792645606, 113.26214608114839 23.097939389250346, 113.26211688048534 23.09765854677408, 113.26210696655055 23.097376372440007, 113.26211637851996 23.097093979491895, 113.26214507907497 23.096812482804513, 113.2621929545513 23.096532994478796, 113.26225981539152 23.096256619439103, 113.26234539690051 23.095984451049834, 113.26244936030004 23.095717566768897, 113.26257129407892 23.095457023855122, 113.26271071563299 23.09520385514676, 113.26286707318837 23.094959064927696, 113.2630397480002 23.094723624898254, 113.26322805681826 23.094498470266558, 113.26343125460913 23.09428449597665, 113.2636485375239 23.094082553088775, 113.26387904609997 23.093893445327108, 113.2641218686826 23.093717925809468, 113.26437604505374 23.093556693973415, 113.26464057025224 23.09341039271194, 113.26491439857048 23.09327960573206, 113.26519644771064 23.093164855148142, 113.26548560308396 23.093066599321446, 113.26578072223552 23.092985230956398, 113.26608063937621 23.0929210754628, 113.26638417000402 23.09287438959253, 113.26669011559513 23.09284536035776, 113.26699726834708 23.09283410423662, 113.26730441595389 23.092840666670924, 113.26761034639449 23.09286502185902, 113.26791385271564 23.09290707284556, 113.26821373778982 23.09296665190825, 113.26850881903006 23.093043521240496, 113.26879793304248 23.093137373926854, 113.26907994019938 23.09324783520712, 113.26935372911389 23.093374464023185, 113.2696182210002 23.09351675484131, 113.26987237390205 23.09367413974124, 113.27011518677294 23.093845990762226, 113.27034570339362 23.094031622494672, 113.2705630161109 23.0942302949052, 113.27076626938444 23.09444121638167, 113.27095466312794 23.094663546983988, 113.27112745583192 23.09489640188554, 113.27128396745682 23.09513885498937, 113.27142358208545 23.095389942702816, 113.27154575032445 23.095648667853514, 113.27164999144657 23.095914003729423, 113.27173589526475 23.096184898225296, 113.27180312373217 23.096460278077583, 113.27185141226056 23.096739053169664, 113.2718805707538 23.097020120889546, 113.2718904843511 23.097302370521707, 113.27188111387795 23.09758468765524, 113.27185249600261 23.09786595859049, 113.27180474309752 23.09814507472665, 113.27173804280625 23.09842093691312, 113.27165265731713 23.098692459747774, 113.27154892234654 23.09895857580582, 113.27142724583518 23.099218239783397, 113.27128810636243 23.09947043254065, 113.27113205128464 23.0997141650296, 113.27095969460387 23.099948482092927, 113.27077171457556 23.10017246612032, 113.27056885106364 23.100385240549908, 113.27035190265329 23.10058597320303, 113.27012172353186 23.100773879441423, 113.26987922015022 23.10094822513639, 113.26962534767667 23.1011083294409, 113.26936110625734 23.101253567355666, 113.26908753709694 23.101383372081393, 113.2688057183751 23.10149723715012, 113.26851676101417 23.10159471832913, 113.26822180431415 23.101675435291593, 113.26792201147259 23.101739073049004, 113.2676185650062 23.101785383140783, 113.26731266209218 23.10181418457734, 113.26700550984805 23.10182536453337))"
            } ,
             extNonce: "",
             rowkey: v.keyword,
             pageNumber:this.pageNumber,
             pageSize:20 
        },
          
      }
       company_base_listTab(queryParams).then(res => {
        console.log('企业数据===========》',res);
				  // this.loading = false
				  this.enterpriselist = res.data.content
				  this.total = res.data.total
			  });
    },
     setPageNum(num){
      this.pageNumber=num
      this.handleChildSearchs(this.ChildSearchsV)
      },
       // 获取楼宇
    handlely_shp_geo_polygon_company_list(){ 
      this.loadingLY =true
      let queryParams={
      "polygon":"POLYGON ((113.342104494523 23.0514905034588, 113.342648338468 23.0512904305484, 113.342740860929 23.0511261917408, 113.342794787722 23.0509048481547, 113.342675011519 23.0503622759012, 113.342582371618 23.050194523499, 113.342462550214 23.0495198688552, 113.342396911304 23.0493449687748, 113.341266750237 23.0495880525179, 113.341000622113 23.0497023645708, 113.341556432624 23.0506553355262, 113.342046641271 23.0515190791455, 113.342104494523 23.0514905034588))"
     }
       ly_shp_geo_polygon_company_list(queryParams).then(res => {
        console.log('楼宇数据===========》',res);
				  // this.loading = false
				  // this.enterpriselist = res.data.content
				  // this.total = res.data.total
         this.loadingLY =false

			  });
    },
  },
};
// https://blog.csdn.net/dk123sw/article/details/81095347
</script>

<style scoped lang="scss">
.mapConter {
  position: relative;
  background-color: aqua;
  height: 100%;
}
.rightMove {
  width: 36px;
  height: 130px;
  line-height: 130px;
  text-align: center;
  background: #0071df;
  box-shadow: -6px 0px 12px 0px rgba(7, 28, 69, 0.25);
  border-radius: 6px 0px 0px 6px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9;
}
:v-deep(.el-tabs__item.is-top) {
  border: 1px solid red !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 1px solid red;
}
.drawers {
  position: absolute;
  top: 0;
  bottom: 0;
}
::v-deep .el-tabs__nav-scroll {
  padding-left: 20px;
}
::v-deep .el-tabs__item {
  height: 64px;
  line-height: 64px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-size: 20px;
  color: #222;
  // padding:0 40px;
  // margin-left: 20px;
}
::v-deep .is-active {
  font-weight: bold;
  font-size: 20px;
  color: #0071df;
}
</style>
